﻿<UserControl x:Class="Tareas.SplitPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Loaded="Page_Loaded" Unloaded="Page_Unloaded"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366">

  <UserControl.Resources>
    <CollectionViewSource x:Name="CollectionViewSource" x:Key="CollectionViewSource" />
    
    <ControlTemplate x:Key="ItemDetailTemplate">
      <ScrollViewer VerticalScrollBarVisibility="Auto" Padding="80,0,20,0">
        <StackPanel HorizontalAlignment="Stretch" Orientation="Vertical" Margin="0,55,0,36">
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto"></ColumnDefinition>
              <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <ContentPresenter Grid.Column="1" VerticalAlignment="Center"/>
          </Grid>
          <TextBlock x:Name="DetailTextBlock" Text="{Binding Content}" HorizontalAlignment="Left" Margin="0,20,0,0" Style="{StaticResource ReadingFontStyle}" Height="Auto" TextWrapping="Wrap"/>
        </StackPanel>
      </ScrollViewer>
    </ControlTemplate>

    <ControlTemplate x:Key="PortraitItemDetailTemplate">
      <ScrollViewer VerticalScrollBarVisibility="Auto" Padding="120,0,64,0">
        <StackPanel HorizontalAlignment="Stretch" Orientation="Vertical" Margin="0,0,0,36">
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto"></ColumnDefinition>
              <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <ContentPresenter Grid.Column="1" VerticalAlignment="Top"/>
          </Grid>
          <TextBlock x:Name="DetailTextBlock" Text="{Binding Content}" HorizontalAlignment="Left" Style="{StaticResource ReadingFontStyle}" Height="Auto" TextWrapping="Wrap"/>
        </StackPanel>
      </ScrollViewer>
    </ControlTemplate>

    <ControlTemplate x:Key="SnapItemDetailTemplate">
      <ScrollViewer VerticalScrollBarVisibility="Auto" Padding="20,0,24,0">
        <StackPanel HorizontalAlignment="Stretch" Orientation="Vertical" Margin="0,0,0,20">
          <Grid>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"></RowDefinition>
              <RowDefinition Height="*" ></RowDefinition>
            </Grid.RowDefinitions>

            <ContentPresenter/>
          </Grid>
          <TextBlock x:Name="DetailTextBlock" Text="{Binding Content}" HorizontalAlignment="Left" Style="{StaticResource ReadingFontStyle}" Height="Auto" TextWrapping="Wrap"/>
        </StackPanel>
      </ScrollViewer>
    </ControlTemplate>
  </UserControl.Resources>

  <!-- Page Content -->

  <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}">
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="OrientationStates">
        <VisualState x:Name="Full"/>
        <VisualState x:Name="Fill">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ItemTemplate" Storyboard.TargetName="ItemListView">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapListItemTemplate}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ItemsPanel" Storyboard.TargetName="ItemListView">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FillListItemsPanelTemplate}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="PrimaryColumn">
              <DiscreteObjectKeyFrame KeyTime="0" Value="416"/>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Portrait">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemDetail">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="PortraitDetail">
          <!-- When showing details in portrait ... -->
          <Storyboard>
            <!-- Hide the master list and the column it was in ... -->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="PrimaryColumn">
              <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemListView">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
            </ObjectAnimationUsingKeyFrames>
            <!-- Move the item details down to make room for the title ... -->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ItemDetail">
              <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
            </ObjectAnimationUsingKeyFrames>
            <!-- move the title over ... -->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="TitlePanel">
              <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
            </ObjectAnimationUsingKeyFrames>
            <!-- ... and finally change the item details panel to accomodate the new layout -->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Template" Storyboard.TargetName="ItemDetail">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitItemDetailTemplate}"/>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Snapped">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="BackButton">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapBackButtonStyle}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="PageTitle">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapPageTitleStyle}"/>
            </ObjectAnimationUsingKeyFrames>

            <!-- Hide the master list and the column it was in ... -->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="PrimaryColumn">
              <DiscreteObjectKeyFrame KeyTime="0" Value="320"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemDetail" Storyboard.TargetProperty="Visibility" >
              <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ItemTemplate" Storyboard.TargetName="ItemListView">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapListItemTemplate}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ItemsPanel" Storyboard.TargetName="ItemListView">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapListItemsPanelTemplate}"/>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="SnappedDetail">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="BackButton">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapBackButtonStyle}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="PageTitle">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapPageTitleStyle}"/>
            </ObjectAnimationUsingKeyFrames>

            <!-- Showing details when snapped is similar to portrait ... -->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="PrimaryColumn">
              <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemListView">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ItemDetail">
              <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="TitlePanel">
              <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
            </ObjectAnimationUsingKeyFrames>

            <!-- ... but it also requires a different arrangement of the item details panel -->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Template" Storyboard.TargetName="ItemDetail">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapItemDetailTemplate}"/>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.RowDefinitions>
      <RowDefinition Height="140"/>
      <RowDefinition Height="*"/>
      <RowDefinition Height="0"/> <!-- Allow two-row spanning even when details are bumped down -->
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition x:Name="PrimaryColumn" Width="576"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <!-- Page Title -->

    <Grid x:Name="TitlePanel">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
      <Button x:Name="BackButton" Click="BackButton_Click" Style="{StaticResource BackButtonStyle}"/>
      <TextBlock x:Name="PageTitle" Text="{Binding Title}" Style="{StaticResource PageTitleStyle}" Grid.Column="1" />
    </Grid>

    <!-- Master List -->
        <ListView x:Name="ItemListView" ItemsSource="{Binding Source={StaticResource CollectionViewSource}}" Grid.Row="1" Margin="0,8"
              Background="{StaticResource PageBackgroundBrush}" ItemTemplate="{StaticResource PortraitListItemTemplate}" ItemContainerStyle="{StaticResource ListTileStyle}" ItemsPanel="{StaticResource PortraitListItemsPanelTemplate}"
              VerticalAlignment="Stretch" SelectionChanged="ItemListView_SelectionChanged"/>

    <!-- Detail View
    
         Shows detail item related to the item selected in the master list using
         a templated control to allow for two significantly rearranged views. -->

    <ContentControl x:Name="ItemDetail" Template="{StaticResource ItemDetailTemplate}" DataContext="{Binding SelectedItem, ElementName=ItemListView}" Grid.RowSpan="2" Grid.Column="1">
      <StackPanel x:Name="ItemStackPanel" Orientation="Vertical" Width="280" HorizontalAlignment="Left">
        <TextBlock Text="{Binding Title}" MaxHeight="80" TextTrimming="WordEllipsis" HorizontalAlignment="Left" Style="{StaticResource LargeContentFontStyle}" Margin="0" />
        <TextBlock Text="{Binding Category}" HorizontalAlignment="Left" VerticalAlignment="Top"  TextTrimming="WordEllipsis" Style="{StaticResource SmallContentFontStyle}" Height="20" Margin="0"/>
        <TextBlock Text="{Binding Link}" HorizontalAlignment="Left" VerticalAlignment="Top" TextTrimming="WordEllipsis" Style="{StaticResource SmallContentFontStyle}" Foreground="{StaticResource HighlightBrush}" Height="20" Margin="0"/>
        <TextBlock Text="{Binding Subtitle}" HorizontalAlignment="Left" VerticalAlignment="Top" TextTrimming="WordEllipsis" Style="{StaticResource SmallContentFontStyle}" Height="60" Margin="0"/>
      </StackPanel>
    </ContentControl>
  </Grid>

</UserControl>
